<template>
  <div class="home-container">
    <!-- 头部导航 -->
    <van-nav-bar class="app-navbar-header">
      <div slot="title" class="title-btn-search">
        <van-button type="info" icon="search" round to="/search"
          >搜索</van-button
        >
      </div>
    </van-nav-bar>
    <!-- 文章频道列表 -->
    <van-tabs v-model="active" class="headerTab">
      <van-tab
        :title="item.name"
        v-for="(item) in channelsDate"
        :key="item.id"
      >
        <!-- 文章频道类表的内容 -->
        <ChannelList :listData="item" />
      </van-tab>
      <!-- 汉堡图标 (第一个是占位符，第二个才是真正的图标-->
      <div slot="nav-right" style="flex-shrink: 0; width: 24px" />
      <div slot="nav-right" @click="isShow = true" class="navIcon">
        <van-icon name="wap-nav" />
      </div>
    </van-tabs>
    <!-- 弹出层 -->
    <van-popup
      v-model="isShow"
      closeable
      close-icon-position="top-left"
      position="bottom"
      style="height: 100%"
      get-container="body"
    >
      <ChannelEdit
        :channelsDate="channelsDate"
        @handleIsShow="handleIsShow"
        :active="active"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getItem } from '../../utils/storage'
import ChannelEdit from '@/components/channel-edit'
import ChannelList from './channelList'
import { getChannels } from '@/api/user.js'
export default {
  name: 'HomeIndex',
  props: {},
  data () {
    return {
      channelsDate: [], // 文章频道列表
      active: 1, // 控制被激活的标签
      isShow: false // 弹出层是否展示
    }
  },
  components: {
    ChannelList,
    ChannelEdit
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {},
  created () {},
  mounted () {
    this.loadChannels()
  },
  methods: {
    // 子传父方法
    handleIsShow (index, value) {
      this.isShow = value // 关闭弹出层(false 关闭 true 不关)
      this.active = index // 控制激活标签
    },
    // 获取文章频道列表
    async loadChannels () {
      try {
        let resultD = []
        if (this.user) {
          // 登录的
          const { data } = await getChannels()
          resultD = data.data.channels
        } else {
          // 未登录的
          if (getItem('user-channels')) {
            resultD = getItem('user-channels')
          } else {
            // 其他情况
            const { data } = await getChannels()
            resultD = data.data.channels
          }
        }
        // 把处理好的数据赋值
        this.channelsDate = resultD
      } catch (error) {
        console.log(error, 'er')
      }
    }
  }
}
</script>

<style scoped lang="less">
/deep/.title-btn-search {
  color: white;
}
/deep/.van-button {
  width: 277px;
  height: 32px;
  border: none;
  background: #5babfb;
}
/deep/.van-nav-bar__title {
  max-width: none;
}
.headerTab {
  /deep/.van-tab {
    border-right: 1px solid #edeff3;
    border-bottom: 1px solid #edeff3;
  }
  /deep/.van-tabs__line {
    bottom: 20px;
    width: 30px;
    height: 3px;
    background-color: #3296fa;
    border-radius: 1.5px;
  }
  /deep/.van-tabs__nav {
    padding-left: 0px;
  }
  .navIcon {
    position: fixed;
    top: 52px;
    right: 0px;
    background: white;
    opacity: 0.8;
  }
  /deep/.van-icon {
    font-size: 30px;
    top: 0px;
    left: 0px;
  }
}
</style>
